<template>
  <div class="container">
    <div class="title_bar">
      <div class="main_title">分面统计表</div>
      <div class="sub_title">一组数据切割为多个图表</div>
      <slot name="title"></slot>
    </div>
    <div id="facet_basic" style="width: 100%"></div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import { DataView } from '@antv/data-set'
export default {
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    const vm = this;
    this.chart = new Chart({
      // 指定图表容器 ID
      container: "facet_basic",
      // 自适应宽度，容器伸缩会重新渲染图表
      autoFit: true,
      // 容器的高度
      height: 500,
      // 图表的外侧内边距
      padding: [40, 80, 80, 80],
    });
    fetch("https://gw.alipayobjects.com/os/antvdemo/assets/data/diamond.json")
      .then((res) => res.json())
      .then((data) => {
        this.chart.data(data);
        // 是否同步度量，相同坐标系可同步度量，这里坐标系不同无法同步
        // this.chart.scale({
          // carat: {
          //   sync: true,
          // },
          // price: {
          //   sync: true,
          // },
          // clarity: {
          //   sync: true,
          // },
        // });
        //  将一组数据按照 cut 切割成若干的子集。每个子集数据分配给对应的子 view 容器
        this.chart.facet("rect", {
          // 按哪些字段进行拆分
          fields: ["cut"],
          // 是否展示标题
          showTitle: true,
          // 配置每一个 view
          eachView(view, facet) {
            // 配置饼图
            if (facet.columnValue === "Ideal") {
              view.coordinate("theta", {
                radius: 0.75,
              });
              const dv = new DataView().source(facet.data);
              dv.transform({
                type:'percent',
                field:"price",
                dimension:"clarity",
                as:"percent"
              })
              view.tooltip({
                // 这里 showMarkers 没有起作用
                showMarkers: false,
                itemTpl:
                  '<li class="g2-tooltip-list-item" style="margin-bottom:4px;text-align: left;">' +
                  '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' +
                  "{value}" +
                  "</li>",
              });
              view.data(dv.rows)
              view.interval()
                  .adjust("stack")
                  .position("percent")
                  .color("clarity")
                  .tooltip("clarity*price*percent", (clarity, price, percent) => {
                    return {
                      name: clarity,
                      value: `${price}： ( ${(percent * 100).toFixed(2)} )%`,
                    };
                  })
            // 配置柱状图
            } else if (facet.columnValue === "Good") {
              const dv = new DataView().source(facet.data);
              // 数据聚合
              dv.transform({
                type: 'aggregate', // 别名summary
                fields: ['price'], // 统计字段集
                operations: ['sum'],
                as: ['totalPrice'], // 存储字段集
                groupBy: ['clarity'], // 分组字段集
              });

              view.data(dv.rows)

              view
                .interval()
                .position("clarity*totalPrice")
                .color("clarity");
                
            } else {
              view
                .point()
                .position("carat*price")
                .color("clarity")
                .shape("circle")
                .style({ fillOpacity: 0.3, stroke: null })
                .size(3);
            }
          },
        });

        this.chart.render();
      });
  },
  watch: {
    // 监听图表变化更新数据
    dataList(newValue) {
      console.log(newValue);
      this.chart.changeData(newValue);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .title_bar {
    width: 100%;
    margin-bottom: 20px;
    .main_title {
      width: 100%;
      text-align: center;
      font-size: 40px;
      color: #333333;
    }
    .sub_title {
      width: 100%;
      text-align: center;
      font-size: 28px;
      margin-top: 18px;
      color: #999999;
    }
  }
}
</style>
